<script setup lang='ts'>
import { useSupplierMaterial } from "./hooks/SupplierOutbound";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
import Outbound from "./component/Outbound.vue"
import Delivery from "./component/Delivery.vue"
const {
  Vdialog,
  loading,
  columns,
  dataList,
  outBoundForm,
  DispatchForm,
  nextStep,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  MaterialDetails,
  handleOutBound,
  finish,
  ClosePanelVisible,
  showType,
  clickBack,
  deliveryType,
} = useSupplierMaterial()
</script>

<template>
  <div class="main">
    <PureTableBar title="出库单列表" class="list_hei">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          :pagination="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" size="small"
          :data="dataList" max-height="600" :columns="columns" :checkList="checkList" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="handleOutBound(row)" v-if="row.status == 0"> 出库
            </el-button>
            <el-button type='primary' size="small" text @click="handleOutBound(row)" v-else> 查看 </el-button>

          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <ReDialog :width="1000" :height="500" :models="Vdialog" @Closes="ClosePanelVisible()">
      <template #main>
        <el-scrollbar height="420px">
          <div v-if="!nextStep">
            <Delivery :data="DispatchForm" :Showtype="deliveryType ? 'showAll' : 'handleDelivery'" />
          </div>
          <div v-else>
            <Outbound :data="outBoundForm" :showType="showType ? 'showDetail' : 'created'" />
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <div v-if="!nextStep">
            <el-button class="ml-3" type="primary" @click="nextStep = true">出库</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">关闭</el-button>
          </div>
          <div v-else>
            <el-button class="ml-3" type="primary" @click="clickBack()">上一步</el-button>
            <el-button class="ml-3" type="primary" @click="finish()" v-if="!showType">确认出库</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">关闭</el-button>
          </div>
        </span>
      </template>
    </ReDialog>
    <!-- 物流管理{{ roundAddress }} -->
  </div>
</template>

<style scoped lang="scss">
@import url("@/style/CreditComm.scss");

.DispatchForm {
  display: flex;
  flex-wrap: wrap;

  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 8px;

    .el-form-item__content {
      width: 192px;
    }
  }
}

.DispatchForm_date {
  display: flex;
  padding: 35px 15px;
  border: 1px solid #ebeef5;
  border-top: none;

  ul {
    width: 40%;
    text-align: left;
    position: relative;

    li {
      line-height: 32px;
    }
  }
}

.DispatchForm_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 3%;
  font-size: 16px;
  font-weight: bold;

  h1 {
    font-size: 24px;
  }

  span {
    position: relative;
    display: inline-block;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
    }
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.mySignet {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 13%;
  top: 1%;
}
</style>
